import Taro, { Component } from '@tarojs/taro'
import { AtTabs, AtTabsPane } from 'taro-ui'
import { View, Image, ScrollView } from '@tarojs/components'
import { DNavBar, DUserCar, DItemError } from '@/components'
import './transportmgr.scss'
import http from '@/api'
import sdk from '@/common/sdk'
const car_btn = require('../assets/btn_car.png')
export default class transportmgr extends Component {

  constructor(props) {
    super(props)
    this.state = {
      active: 0,
      type: '',
      scrollStyle: window.screen.availHeight,
      footerStatus1: false,
      footerStatus2: false,
      totalPage1: 1,
      totalPage2: 1,
      list: [],
      list1: [],
      obj1: {
        page: 1,
        limit: 5
      },
      obj2: {
        page: 1,
        limit: 5
      },
      list2: [],
      title: '运输管理'
    }
  }

  componentWillMount() {
    let { type = '', active = 0 } = this.$router.params
    let { title } = this.state
    if (type) {
      title = '物流承运车辆'
    }
    this.setState({
      type,
      active: +active,
      title
    }, () => {
      if (this.state.active === 1) {
        this.myApplyList()
      } else {
        this.transportCarlist()
      }
    })

  }


  componentDidShow() {
    sdk.setTitleInfo(this.state.title)
  }

  myApplyList() {
    let { obj2 } = this.state
    let obj = {
      page: obj2.page,
      limit: obj2.limit
    }
    let { totalPage2 } = this.state
    if (obj.page > totalPage2) {
      this.setState({
        footerStatus2: true
      })
      return
    }
    http.myApplyList(obj2).then(res => {
      let { list2 } = this.state
      res.list.map(item => {
        list2.push({
          title: `${item.ciName}`,
          age: `${item.ciAge}`,
          name: `${item.drName}`,
          order: `${item.ciNo}`,
          id: `${item.id}`,
          status: `${item.ciCarStatus}`
        })
      })
      this.setState({
        list: list2,
        totalPage2: res.totalPage
      })
    })
  }
  transportCarlist() {
    let { obj1 } = this.state
    let obj = {
      page: obj1.page,
      limit: obj1.limit
    }
    let { totalPage1 } = this.state
    if (obj.page > totalPage1) {
      this.setState({
        footerStatus1: true
      })
      return
    }
    http.transportCarlist(obj).then(res => {
      let { list1 } = this.state
      res.list.map(item => {
        list1.push({
          title: `${item.ciName}`,
          age: `${item.ciAge}`,
          name: `${item.drName}`,
          order: `${item.ciNo}`,
          id: `${item.id}`,
        })
      })
      let list = list1
      this.setState({
        list,
        list1,
        totalPage1: res.totalPage
      })
    })
  }
  onScroll1 = () => {
    this.setState({
      obj1: {
        ...this.state.obj1,
        page: this.state.obj1.page + 1
      }
    }, () => {
      this.transportCarlist()
    })
  }
  onScroll2 = () => {
    this.setState({
      obj2: {
        ...this.state.obj2,
        page: this.state.obj2.page + 1
      }
    }, () => {
      this.myApplyList()
    })
  }
  handleClick(value) {
    let { list, list1, list2 } = this.state
    // list = value === 0 ? list1 : list2
    this.setState({
      list1: [],
      list2: [],
      obj1: {
        page: 1,
        limit: 10
      },
      obj2: {
        page: 1,
        limit: 10
      },
      active: value,
      scrollStyle: window.screen.availHeight
    })
    if (value === 0) {
      this.transportCarlist()
    } else if (value === 1) {
      this.myApplyList()
    }

  }
  handlerPush1(id, status, item) {
    if (this.state.type) {
      sessionStorage.setItem(this.state.type, JSON.stringify(item))
      Taro.navigateBack()
      return
    }
    Taro.navigateTo({
      url: `/pages/cardetail/cardetail?id=${id}`
    })
  }
  //
  handlerPush2(id, status) {
    Taro.navigateTo({
      url: `/pages/applydetail/applydetail?id=${id}&status=${status}`
    })
  }
  //登记车辆
  onRegister() {
    Taro.navigateTo({
      url: `/pages/carregister/carregister`
    })
  }
  render() {
    let tabList = [{ title: '我的车辆' }, { title: '我的申请' }]
    const {
      type,
      active,
      list,
      scrollStyle,
      footerStatus1,
      footerStatus2,
      title
    } = this.state
    if (type) {
      tabList = []
    }
    return (
      <View className='b_transoprtmgr'>
        <DNavBar title={title} className='b_transoprtmgr_nav'></DNavBar>
        <View className='b_transoprtmgr__box'>
          <View className='b_transoprtmgr__content'>
            <AtTabs current={active} tabList={tabList} onClick={this.handleClick.bind(this)}>
              <AtTabsPane>
                <ScrollView
                  scrollY
                  scrollWithAnimation
                  lowerThreshold='20'
                  style={`height:${scrollStyle - 50}PX`}
                  onScrollToLower={this.onScroll1}>

                  <DUserCar list={list} onHandleCar={this.handlerPush1.bind(this)}></DUserCar>
                  {
                    footerStatus1 && <View className='b_transoprtmgr__footer1'>暂无更多</View>
                  }
                </ScrollView>

              </AtTabsPane>
              <AtTabsPane>
                <ScrollView
                  scrollY
                  scrollWithAnimation
                  lowerThreshold='20'
                  style={`height:${scrollStyle - 50}PX`}
                  onScrollToLower={this.onScroll2}>
                  <DUserCar list={list} onHandleCar={this.handlerPush2.bind(this)}></DUserCar>
                  {
                    footerStatus2 && <View className='b_transoprtmgr__footer1'>暂无更多</View>
                  }
                </ScrollView>
              </AtTabsPane>
            </AtTabs>
          </View>
          <View className='b_transoprtmgr__footer'>
            <Image src={car_btn} className='b_transoprtmgr__footer_btn' onClick={this.onRegister.bind(this)}></Image>
          </View>
        </View>
        {list.length === 0 && <DItemError type={8}></DItemError>}
      </View>

    )
  }
}
